const card = document.querySelector('.card');
//设置一个旋转角度的范围。
const xRange = [-10, 10]
const yRange = [-10, 10]

function getRotate(range, value, max) {
    return value / max * (range[1] - range[0]) + range[0]
}//获取旋转范围的函数

card.onmousemove = e => {
    const { offsetX, offsetY } = e
    const { offsetWidth, offsetHeight } = card
    const ry = -getRotate(yRange, offsetX, offsetWidth)
    const rx = getRotate(xRange, offsetY, offsetHeight)
    card.style.setProperty('--ry', `${ry}deg`)
    card.style.setProperty('--rx', `${rx}deg`)
    //ai真的太好用了
}
// 最后鼠标移出时偏移的角度归零。
card.onmouseleave = () => {
    card.style.setProperty('--ry', 0)
    card.style.setProperty('--rx', 0)
}
//牛而逼之，明天复盘一下。


